<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Vendor JS Files -->
    <script th:src="@{vendor/purecounter/purecounter.js}"></script>
    <script th:src="@{vendor/aos/aos.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{vendor/glightbox/js/glightbox.min.js}"></script>
    <script th:src="@{vendor/isotope-layout/isotope.pkgd.min.js}"></script>
    <script th:src="@{vendor/swiper/swiper-bundle.min.js}"></script>
    <script th:src="@{vendor/php-email-form/validate.js}"></script>
    <script th:src="@{vendor/jq/jquery-3.4.1.js}"></script>
    <!-- Template Main JS File -->
<!--    <script th:src="@{js/main.js}"></script>-->
    <script th:inline="javascript">
        $(document).ready(function(){
            $("#XMES").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("product1.html");
                window.location.hash="product1.html"
            })
            $("#PMES").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("product2.html");
                window.location.hash="product2.html"
            })
            $("#CMES").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("product3.html");
                window.location.hash="product3.html"
            })
            $("#NMES").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("product4.html");
                window.location.hash="product4.html"
            })
            $("#Battery").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("solution1.html");
                window.location.hash="solution1.html"
            })
        })
    </script>
    <style>
.demoContainer{
    display: flex;
    background-color: #f3f5f6;
    flex-direction: column;
    align-items: center;
}
.demoContainer h1{
    font-size: 35px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    color: #3a3939;
    border-bottom-style: solid;
    border-bottom-color: #5ea8f1;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-width: 5px;
}
.box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*height: 800px;*/
    width: 70%;
    flex-wrap: wrap;
}
.box-item{
    display: flex;
    flex-direction: column;
    background-color: #d9d9d9;
    /*justify-content: center;//控制主轴对齐*/
    align-items: center;//控制交叉轴对齐
    border: #274eee solid;
    /*padding: 10px;//页面内容距离边框*/
    margin: 10px;//item之间相距距离
}
.box-item:hover {
    background-color: #297df6;
    transition: 0.3s;
}
.box-item span{
    text-align: start;
    color: #94989b;
    display: flex;
    font-size: 50px;
    justify-content: center;//控制主轴对齐
}

.box-item a{
    margin-top: 20px;
    display: flex;
    justify-content: center;//控制主轴对齐
    color: #5c636a;
}
.box-item img{
    align-items: center;
    margin: 20px;
}
.box-item button{
    border: none;
    border-radius: 10px;
    height: 30px;
    width: 100px;
    margin-top: 20px;
    margin-bottom: 10px;
    background-color: #053b72;
    align-items: center;
    color: #fff;
}
.about-comp{
    height: 980px;
    width: 100%;
    background-image: url(/img/bgimg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 30px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about-comp h1{
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}
.about-comp p{
    font-size: 20px;
    width: 70%;
    text-align: center;
    color: #fff3cd;
}
.img-box{
    margin-top: 20px;
    width: 80%;
}
.img-box ul{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.img-box li{
    float: left;
   text-align: center;
    font-size: 20px;
    color: #fff;
    width: 30%;
    margin: 30px 0;
}
.img-box p{
    width: 100%;
}
.news{
    background: #f6f4ed;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.news h1{
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    color: #3a3939;
    border-bottom-style: solid;
    border-bottom-color: #5ea8f1;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-width: 5px;
}
.new_content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.new_content .content_left{
    margin: 2%;
    position: relative;
    border-radius: 10px;
    width: 46%;
    overflow: hidden;
}
.new_content .content_left:hover h2,
.new_content .content_left:hover p{
    font-size: 30px; /* 设置字体大小 */
    color: #0d6efd;
    transition: 0.3s;
}
.new_content .content_left img{
    width: 100%;
    object-fit: cover;
}
.new_content .content_left h2 {
    position: absolute; /* 子元素设置为绝对定位 */
    top: 0%; /* 从顶部开始，向下偏移50% */
    left: 5%; /* 从左侧开始，向右偏移50% */
    color: #fff; /* 文本颜色为白色，以便在图片上可见 */
    text-align: center; /* 使文本居中 */
    font-size: 20px; /* 设置字体大小 */
}
.new_content .content_left p {
    position: absolute; /* 子元素设置为绝对定位 */
    top: 8%; /* 从顶部开始，向下偏移50% */
    left: 0%; /* 从左侧开始，向右偏移50% */
    color: #fff; /* 文本颜色为白色，以便在图片上可见 */
    text-align: center; /* 使文本居中 */
    font-size: 20px; /* 设置字体大小 */
    font-weight: bold;/* 设置字体加粗 */
}

    </style>
</head>
<body>
<div class="demoContainer">
    <h1>核心业务</h1>
   <div class="box">
       <div class="box-item" id="XMES">
           <span>01</span>
           <a>电池生产制造执行系统XMES</a>
           <hr>
           <img th:src="@{img/solutions/MES_3.jpg}"  width="300px" height="300px" alt="...">
           <button>查看更多</button>
       </div>
       <div class="box-item" id="PMES">
           <span>02</span>
           <a>pack线生产制造系统PMES</a>
           <hr>
           <img th:src="@{img/solutions/电池pack.jpg}"  width="300px" height="300px" alt="...">
           <button>查看更多</button>
       </div>
       <div class="box-item"  id="CMES">
           <span>03</span>
           <a>电池生产智能控制平台系统CMES</a>
           <hr>
           <img th:src="@{img/solutions/电池生产.jpg}"  width="300px" height="300px" alt="...">
           <button>查看更多</button>
       </div>
       <div class="box-item" id="NMES">
           <span>04</span>
           <a>工厂能量管理系统XMES</a>
           <hr>
           <img th:src="@{img/solutions/能源储备.jpg}"  width="300px" height="300px" alt="...">
           <button>查看更多</button>
       </div>
       <div class="box-item">
           <span>05</span>
           <a>工业自动化工控软件设计</a>
           <hr>
           <img th:src="@{img/solutions/工控软件设计.jpg}"  width="300px" height="300px" alt="...">
           <button>查看更多</button>
       </div>
   </div>
</div>
<div class="demoContainer">
    <h1>行业解决方案</h1>
    <div class="box">
        <div class="box-item" id="Battery" >
            <span>01</span>
            <a>锂电池生产行业</a>
            <img th:src="@{img/solutions/电池pack.jpg}"  width="300px" height="300px" alt="...">
            <button>查看更多</button>
        </div>
        <div class="box-item">
            <span>02</span>
            <a>能源储备</a>
            <img th:src="@{img/solutions/能源储备.jpg}"  width="300px" height="300px" alt="...">
            <button>查看更多</button>
        </div>
        <div class="box-item">
            <span>03</span>
            <a>电子制造</a>
            <img th:src="@{img/solutions/电子制造.jpg}"  width="300px" height="300px" alt="...">
            <button>查看更多</button>
        </div>
        <div class="box-item">
            <span>04</span>
            <a>医疗器械</a>
            <img th:src="@{img/solutions/医疗器械.jpg}"  width="300px" height="300px" alt="...">
            <button>查看更多</button>
        </div>
    </div>
</div>
<div class="about-comp">
    <h1>关于信加</h1>
    <p>广州市信加科技有限公司成立于2009年，位于广东省广州市番禺区新光创业园。 是国家级高新技术企业，企业信用评价AAA级信用企业，“双软认证”企业，
        ISO9001质量体系认证企业CMMI3级资质，MES服务商。以智慧制造、智慧教育、智慧建筑等为核心业务，
        包括企业信息化，尤其是制造业MES、SAP ERP、SAP ME/MII、WMS等系统项目实施，智能楼宇项目，数字化校园，工业4.0高校实验室，移动互联网APP等。为客户提供MES管理系统、MES软件系统、
        电池行业MES系统、医疗器械MES系统、医疗设备MES系统及动力电池MES解决方案。
        业务覆盖全国，主要有深圳、广州、东莞、惠州、江西、广西、广东、湖南等地。</p>
    <div class="img-box">
        <ul>
            <li>
                <img th:src="@{img/icon/picon01.png}">
                <p>专业的相关团队</p>
            </li>
            <li>
                <img th:src="@{img/icon/picon02.png}">
                <p>资深的技术人员</p>
            </li>
            <li>
                <img th:src="@{img/icon/picon03.png}">
                <p>丰富的项目经验</p>
            </li>
            <li>
                <img th:src="@{img/icon/picon04.png}">
                <p>强大的合作伙伴</p>
            </li>
            <li>
                <img th:src="@{img/icon/picon05.png}">
                <p>专精于新能源电池</p>
            </li>
            <li>
                <img th:src="@{img/icon/picon08.png}">
                <p>完善的服务体系</p>
            </li>
        </ul>
    </div>
</div>
<div class="news">
    <h1>新闻中心</h1>
    <div class="new_content">
        <div class="content_left">
            <img th:src="@{img/solutions/MES_1.jpg}"  alt="...">
            <h2>公司新闻(2024/5/8)</h2>
            <p>允升科技智慧工厂刷新工业企业产能</p>
        </div>
        <div class="content_left">
            <img th:src="@{img/solutions/MES_2.jpg}"  alt="...">
            <h2>公司新闻(2024/5/8)</h2>
            <p>允升科技智慧工厂刷新工业企业产能</p>
        </div>
        <div class="content_left">
            <img th:src="@{img/solutions/MES_3.jpg}"  alt="...">
            <h2>公司新闻(2024/5/8)</h2>
            <p>允升科技智慧工厂刷新工业企业产能</p>
        </div>
        <div class="content_left">
            <img th:src="@{img/solutions/MES_4.jpg}"  alt="...">
            <h2>公司新闻(2024/5/8)</h2>
            <p>允升科技智慧工厂刷新工业企业产能</p>
        </div>
    </div>
</div>
</body>
</div>
</html>